<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Friend Connect In-page integration</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('friendconnect', '0.8');</script>
<script type="text/javascript" src="http://d1lzci7p8hi5b7.cloudfront.net/opensocial-jquery.min.js"></script>
<script type="text/javascript">
jQuery.container.id = '04434253654266747254';
jQuery.container.parentUrl = '/';
jQuery.container.cache = false;
jQuery(function($) {

  if ($.anonymous)
    $('.anonymous').toggle();

  $('#m1 .signin').click(function() {
    $.signIn(function() {
	  location.reload();
	});
	return false;
  });

  $('#m1 .signout').click(function() {
    $.signOut(function() {
	  location.reload();
	});
	return false;
  });

  $('#m1 .invite').click(function() {
    $.invite();
	return false;
  });

  $('#m1 .settings').click(function() {
    $.settings(function() {
	  location.reload();
	});
	return false;
  });

  $('#f1').submit(function() {
    $.signIn(this.provider.value, function() {
	  location.reload();
	});
	return false;
  });

  $('#f2').submit(function() {
    $.invite(this.message.value);
	return false;
  });

  $('#m2 .button').signIn(function() {
	location.reload();
  });

  var skin = {};
  skin['BORDER_COLOR'] = '#cccccc';
  skin['ENDCAP_BG_COLOR'] = '#e0ecff';
  skin['ENDCAP_TEXT_COLOR'] = '#333333';
  skin['ENDCAP_LINK_COLOR'] = '#0000cc';
  skin['ALTERNATE_BG_COLOR'] = '#ffffff';
  skin['CONTENT_BG_COLOR'] = '#ffffff';
  skin['CONTENT_LINK_COLOR'] = '#0000cc';
  skin['CONTENT_TEXT_COLOR'] = '#333333';
  skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
  skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
  skin['CONTENT_HEADLINE_COLOR'] = '#333333';
  skin['NUMBER_ROWS'] = '4';

  $('#g1').gadget(
    'http://www.google.com/friendconnect/gadgets/members.xml',
	{ skin: skin }
  );

  $('#f3').submit(function() {
    $('<div class="gadget" />')
	  .appendTo('#g2')
	  .gadget(this.url.value);
	return false;
  });

  // people
  var url = '/people/@viewer/@self';
  $.ajax({
    url: url, dataType: 'data',
    success: function(data) {
      var person = data[0];
	  if (person.thumbnailUrl)
	    $('#person .thumbnail img')
	      .attr('src', person.thumbnailUrl)
	      .show();
	  $('#person .id')
	    .text(person.id);
	  $('#person .displayName')
	    .text(person.displayName);
    },
	error: function(xhr, status, e) {
	  $('#person').text(e || status);
	}
  });

});
</script>
<style type="text/css">
<!--
h2, p, form, dl, div.menubar {
  margin: .7em 0;
}

div.button {
  margin: .4em 0;
}

div.gadget {
  margin: .4em 0;
  width: 300px;
}

-->
</style>
</head>
<body>
<h1>Google Friend Connect In-page integration</h1>

<p>
<a href="http://code.google.com/p/opensocial-jquery/">opensocial-jquery</a> is jQuery based concise JavaScript Library for rapid OpenSocial Gadgets development. When you use opensocial-jquery, you can develop OpenSocial Gadgets by the method of developing the website by jQuery.
</p>

<h2>Links</h2>

<div id="m1" class="menubar">
<a class="signin anonymous" href="#signin" style="display:none;">Sign in</a>
<a class="signout anonymous" href="#signout">Sign out</a>
<a class="invite anonymous" href="#invite">Invite</a>
<a class="settings anonymous" href="#settings">Settings</a>
</div>

<h2>Providers</h2>

<form id="f1">
<select name="provider">
<option value="google">Google</option>
<option value="yahoo">Yahoo!</option>
<option value="aim">AIM</option>
<option value="openid">OpenID</option>
</select>
<input type="submit" value="Sign in" />
</form>

<h2>Invite</h2>

<form id="f2">
<textarea name="message" rows="3" cols="40"></textarea><br/>
<input type="submit" value="Invite" />
</form>

<h2>Buttons</h2>

<div id="m2" class="menubar">
<div class="button"></div>
<div class="button long"></div>
<div class="button">Click here to join</div>
<div class="button text">Click here to sign in:</div>
</div>

<h2>Gadgets</h2>

<div id="g1" class="gadget"></div>

<form id="f3">
<input type="text" name="url" value="http://gadgets.agektmr.com/Footprints/friendconnect.xml" size="50" />
<input type="submit" value="Add gadget" />
</form>

<div id="g2"></div>

<h2>OpenSocial</h2>

<dl id="person">
<dt class="thumbnail"><img style="display:none;" /></dt>
<dd class="id"></dd>
<dd class="displayName"></dd>
</dl>

<hr/>
<address>Copyright(C) 2009 <a href="http://friendfeed.com/nakajiman">LEARNING RESOURCE LAB</a></address>

</body>
</html>